<template>
  <HeaderNav />
  <article>
    <!-- 网站主体 -->
    <div id="main">
      <!-- 定义右侧窗口信息 -->
      <section class="aside">
		  <!-- 面板 -->
        <UserAside />

        <!-- 评论资源 -->
        <ResourceComment v-bind:resId="id"/>
      </section>
      <section>
        <!-- 定义详细目录-->
        <div id="detail">
          <!-- 资源上传者信息 -->
          <div class="res-author">
            <img src="./images/user.jpg"/>
            <span>─╀0vЁ灬残夜</span><br/>
            <div class="gz">
              <a href="javascript:void(0)" id="attach">关注</a>
              <a href="/message?type=letter&to=12" id="letter">私信</a>
            </div>
            <a href="/more/123">查看TA的更多资源</a>
          </div>

          <!-- collect 样式 会显示 收藏印章(如果该资源没有被收藏，不显示) -->
          <div class="res-detail collect">
            <!-- 资源信息 -->
            <div class="title">
              <h1>Spring cloud,Spring boot 项目实例，两个<a href="javascript:void(0)"></a></h1>
              <b class="time">2017-06-19</b>
              <b class="filesize">12.6MB</b>
              <span class="kws">
					<em>spring</em>
					<em>cloud</em>
					<em>spring boot</em>
				</span>
            </div>

            <div class="desc"> <!-- 信息描述-->
              spring cloud 项目基于Spring Cloud的云分布式后台管理系统架构，
              核心技术采用Eureka、Fegin、Ribbon、Zuul、
              Hystrix、Security、OAth、Mybatis、Ace-cache等主要框架和中间件，
              UI采用Bootstrap、jquery等前端组件spring boot项目是使用spring boot + thymeleaf
              开发个人博客项目.本人参照好长时间，完美运行
            </div>
			
			<Star :model-value="2" class="msg" readonly/>
            
            <div class="oper"> <!-- 下载操作-->
              <span>所需积分：<b>2</b></span>
              <span>下载次数：<b>100</b></span>
              <br />
              <span>
					<a class="btn">取消收藏</a>
					<a class="btn downx">普通下载</a>
					<a class="btn thunder">迅雷下载</a>
				</span>;
            </div>
          </div>

        </div>
        <div id="comment">
          <div class="title">
            评论：<span>共有<b>2</b>条</span>
          </div>

          <!--每一条评论 -->
          <div class="cons">
            <div class="img">
              <img src="./images/coms.jpg" />
              <Star :model-value="3" class="star" readonly/>
            </div>
            <div class="cmt">
              <span>张三</span>|<span>2016-05-17 15:32:12</span>
              <p class="msg">
					<span>
						这本书真心不错，值得下载~！
					</span>
              </p>
            </div>
          </div>

          <div class="cons">
            <div class="img">
              <img src="./images/coms.jpg" />
              <Star :model-value="5" class="star" readonly/>
            </div>
            <div class="cmt">
              <span>张三</span>|<span>2011-05-17 15:32:12</span>
              <p class="msg">
					<span>
						Google Plus用透明到白色的渐变遮罩，渐变遮罩在文字超出的时候才显示，但无法挤出文字，且背景只能纯色，不理想。
						豌豆荚则更简单粗暴换行显示，换行显示则文字未超出时依然显示 ...xxx，更不理想！当字数多到一定程度就显示省略号点点点。
						最初只是简单的点点点，之后花样越来越多，点点点加下箭头，点点点加更多，点点点加更多加箭头...。多行省略就是大段文字后面的花式点点点。
					</span>
              </p>
            </div>
          </div>
			
		  <!-- 分页插件 -->	
          <VanPagination v-model="page" :totalItems="total" :itemsPerPage="10" :showPageSize="5" :forceEllipses="true" />

        </div>

      </section>
    </div>
  </article>
  <Footer />
</template>

<script>
import HeaderNav from "../components/HeaderNav.vue";
import Footer from "../components/Footer.vue";
import UserAside from "../components/UserAside.vue";
import VanPagination from '../components/VanPagination.vue' ;
import Star from '../components/Star.vue' ;
import ResourceComment from '../components/ResourceComment.vue'

export default {
  components: {
    HeaderNav,
    Footer ,
	UserAside,
	VanPagination,
	Star,
	ResourceComment,
  },
  props: {
	  id: { // 资源ID 
		  type: [Number , String], 
		  required: true, 
	  }
  },
  data(){
	  return {
		  page: 1,  
		  total: 1000, 
	  }
  }
}
</script>

<style scoped>

</style>